<template>
  <footer class="footer" v-show="list.length">
      <span class="todo-count"><strong>{{ sy }}</strong>剩余</span>
      <ul class="filters">
        <li>
          <a :class="{selected:type==='all'}" @click="filterType('all')" href="#/">全部</a>
        </li>
        <li>
          <a href="#/active" :class="{selected:type==='active'}" @click="filterType('active')">进行中</a>
        </li>
        <li>
          <a href="#/completed" :class="{selected:type==='completed'}" @click="filterType('completed')">已完成</a>
        </li>
      </ul>
      <button class="clear-completed" @click="clear" v-show="ishow">清除已完成</button>
    </footer>
</template>

<script>
export default {
  props:['list','type'],
  computed: {
    sy() {
      return this.list.filter(x => !x.isDone).length
    },
    ishow() {
      return  this.list.some(x => {
      return x.isDone
      })
    }
  },
  methods: {
    clear() {
      this.$emit('clear')
    },
    filterType(type) {
      this.$emit('filterType',type)
    }
  }
}
</script>

<style>

</style>